var that;
class Tab {
    constructor(tab) {
        that = this;
        this.main = document.querySelector(tab);
        this.lis = this.main.querySelectorAll('ul li');
        this.tabadd = this.main.querySelector(".tabadd span");
        this.text = this.main.querySelector(".text");
        this.contents = this.main.querySelectorAll(".text div");
        this.uls = this.main.querySelector('ul');
        this.x = this.main.querySelectorAll('li .x');
        this.content = this.main.querySelectorAll('li .content')
        this.init();
    }
    // 初始化相关元素绑定事件
    init() {
        that.updateNode();
        for (var i = 0; i < this.lis.length; i++) {
            this.lis[i].index = i;
            this.lis[i].onclick = this.toggleTab;
            this.x[i].onclick = this.removeTab;
            this.content[i].ondblclick = this.editTab;
            this.contents[i].ondblclick = this.editTab;
        }
        this.tabadd.onclick = this.addTab;
    }

    updateNode() {
        that.lis = that.main.querySelectorAll('li');
        that.contents = that.main.querySelectorAll(".text div");
        that.x = this.main.querySelectorAll('li .x');
        that.content = this.main.querySelectorAll('li .content');
    }

    // 1.切换
    toggleTab() {
        that.clearClass();
        this.className = 'current';
        that.contents[this.index].className = 'textBlock';
    }
    clearClass() {
        for (var i = 0; i < this.lis.length; i++) {
            this.lis[i].className = '';
            this.contents[i].className = '';
        }
    }

    // 2.增添
    addTab() {
        that.clearClass();
        var li = '<li class="current"><span class="content">新加卷</span><span class="x">x</span></li>';
        var content = '<div class="textBlock">新加卷</div>';
        that.uls.insertAdjacentHTML('beforeend', li);
        that.text.insertAdjacentHTML('beforeend', content);
        that.init();
        if (that.lis.length == 9) {
            that.uls.style.width = '450px';
        }
    }

    // 3.删除
    removeTab(e) {
        e.stopPropagation();
        var index = this.parentNode.index;
        console.log(index);
        that.lis[index].remove();
        that.contents[index].remove();
        that.init();
        if (document.querySelector('.current')) {
            return;
        } else if (index == 0) {
            that.lis[index] && that.lis[index].click();
        } else {
            index--;
            that.lis[index] && that.lis[index].click();
        }
    }


    // 4.修改
    editTab() {
        var str = this.innerHTML;
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

        if (this.parentNode.className == 'current') {
            this.innerHTML = '<input type="text"/>';
            console.log(this.parentNode.className);
        } else {
            this.innerHTML = '<textarea></textarea>';
            console.log(this.parentNode.className);
        }
        var input = this.children[0];
        input.value = str;
        input.select();
        input.onblur = function () {
            this.parentNode.innerHTML = this.value;
        }
    }
}

new Tab('.tab');